<<<<<<< HEAD
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="./Js/vue.js"></script>
    <title>Vue实训</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .totalBody {
            display: flex;
            position: relative;
            margin: 50px auto;
            border: 1px solid black;
            width: 500px;
            height: 600px;
            border-radius: 10px;
        }
        .innerBody{
            margin:auto;
            position:absolute;
            top: 50px;
            height: 500px;
            overflow: auto;
        }
        #inputCss {
            height: 50px;
            width: 350px;
            margin-bottom: 50px;
        }
        .listCss{
            position: relative;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
            border-radius: 4px;
        }
        #buttonCss0 {
            height: 25px;
            width: 50px;
        }
        #buttonCss1 {
            margin:20px 200px;
            height: 50px;
            width: 100px;
        }
        #buttonCss2 {
            margin-top:20px;
            height: 50px;
            width: 100px;
        }
        .addText {
            margin:50px 50px;
            height: 50px;
            width: 300px;
        }
        .buttonDel{
            float:right;
        }
        button:hover{
            background-color: pink;
            color:#fff;
            border-color:pink;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="totalBody">
            <div class="innerBody">
                &nbsp;&nbsp;&nbsp;&nbsp;查询：<input type="text" placeholder="请输入要做的事情" id="inputCss" v-model="wtoDo">
                <ul>
                    <li v-for="(p,index) in toDo2" :key="p.id" class="listCss">
                        <input type="checkbox"  v-model="p.hobby" :value="p.thing" >{{p.id}}-{{p.thing}}
                        <button class="buttonDel" @click="deleteIp(p.id)">删除</button>
                    </li>
                </ul>
                    <div style="margin-left:200px;">
                        {{toDo.filter(v=>{return v.hobby}).length}}/{{toDo.length}}
                    </div>
                <input type="text" placeholder="请输入您要添加的数据(id-event)" class="addText" v-model="wtAdd">
                <button id="buttonCss0" @click="addE">
                    添加
                </button>
                <button id="buttonCss1" @click="finishCheck">
                    提交
                </button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        const vm=new Vue({
            el:'#root',
            data:{
                toDo:[{id:0,thing:"eat",hobby:false},{id:1,thing:"eat",hobby:false}],
                wtoDo:"",
                wtAdd:"",
            },
            computed:{
                toDo2:{
                    get(){      
                        if(this.wtoDo!=="")
                        {
                            return this.toDo.filter((p)=>{
                                return p.thing.indexOf(this.wtoDo) !==-1
                            })
                        }
                        return this.toDo
                    },
                    set(newVal)
                    {
                        this.toDo=this.toDo.filter((p)=>{
                            return p.thing!==newVal
                        })
                    }
                }
            },
            methods:{
                addE(){
                    if(this.wtAdd!=null)
                    {
                        var wtAdd_split=this.wtAdd.split('-')
                        let tmp={id:wtAdd_split[0],thing:wtAdd_split[1],hobby:false}
                        this.toDo.push(tmp);
                        this.wtAdd="";
                    }
                },
                finishCheck(){
                    for(var i=this.toDo.length-1;i>= 0;i--)
                    {
                        if(this.toDo[i].hobby===true)
                        {
                            console.log("您已完成"+this.toDo[i].thing)
                            this.toDo.splice(i,1)
                        }
                    }
                },
                deleteIp(val){
                    for(var i=0;i<this.toDo.length;i++)
                    {
                        if(this.toDo[i].id===val)
                        {
                            this.toDo.splice(i,1);
                        }
                    }
                }
            }
        })
    </script>
</body>
=======
<<<<<<< HEAD
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="./Js/vue.js"></script>
    <title>Vue实训</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .totalBody {
            display: flex;
            position: relative;
            margin: 50px auto;
            border: 1px solid black;
            width: 500px;
            height: 600px;
            border-radius: 10px;
        }
        .innerBody{
            margin:auto;
            position:absolute;
            top: 50px;
            height: 500px;
            overflow: auto;
        }
        #inputCss {
            height: 50px;
            width: 350px;
            margin-bottom: 50px;
        }
        .listCss{
            position: relative;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
            border-radius: 4px;
        }
        #buttonCss0 {
            height: 25px;
            width: 50px;
        }
        #buttonCss1 {
            margin:20px 200px;
            height: 50px;
            width: 100px;
        }
        #buttonCss2 {
            margin-top:20px;
            height: 50px;
            width: 100px;
        }
        .addText {
            margin:50px 50px;
            height: 50px;
            width: 300px;
        }
        .buttonDel{
            float:right;
        }
        button:hover{
            background-color: pink;
            color:#fff;
            border-color:pink;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="totalBody">
            <div class="innerBody">
                &nbsp;&nbsp;&nbsp;&nbsp;查询：<input type="text" placeholder="请输入要做的事情" id="inputCss" v-model="wtoDo">
                <ul>
                    <li v-for="(p,index) in toDo2" :key="p.id" class="listCss">
                        <input type="checkbox"  v-model="p.hobby" :value="p.thing" >{{p.id}}-{{p.thing}}
                        <button class="buttonDel" @click="deleteIp(p.id)">删除</button>
                    </li>
                </ul>
                    <div style="margin-left:200px;">
                        {{toDo.filter(v=>{return v.hobby}).length}}/{{toDo.length}}
                    </div>
                <input type="text" placeholder="请输入您要添加的数据(id-event)" class="addText" v-model="wtAdd">
                <button id="buttonCss0" @click="addE">
                    添加
                </button>
                <button id="buttonCss1" @click="finishCheck">
                    提交
                </button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        const vm=new Vue({
            el:'#root',
            data:{
                toDo:[{id:0,thing:"eat",hobby:false},{id:1,thing:"eat",hobby:false}],
                wtoDo:"",
                wtAdd:"",
            },
            computed:{
                toDo2:{
                    get(){      
                        if(this.wtoDo!=="")
                        {
                            return this.toDo.filter((p)=>{
                                return p.thing.indexOf(this.wtoDo) !==-1
                            })
                        }
                        return this.toDo
                    },
                    set(newVal)
                    {
                        this.toDo=this.toDo.filter((p)=>{
                            return p.thing!==newVal
                        })
                    }
                }
            },
            methods:{
                addE(){
                    if(this.wtAdd!=null)
                    {
                        var wtAdd_split=this.wtAdd.split('-')
                        let tmp={id:wtAdd_split[0],thing:wtAdd_split[1],hobby:false}
                        this.toDo.push(tmp);
                        this.wtAdd="";
                    }
                },
                finishCheck(){
                    for(var i=this.toDo.length-1;i>= 0;i--)
                    {
                        if(this.toDo[i].hobby===true)
                        {
                            console.log("您已完成"+this.toDo[i].thing)
                            this.toDo.splice(i,1)
                        }
                    }
                },
                deleteIp(val){
                    for(var i=0;i<this.toDo.length;i++)
                    {
                        if(this.toDo[i].id===val)
                        {
                            this.toDo.splice(i,1);
                        }
                    }
                }
            }
        })
    </script>
</body>
=======
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> d376503 (饶驿婷)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="./Js/vue.js"></script>
    <title>Vue实训</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .totalBody {
            display: flex;
            position: relative;
            margin: 50px auto;
            border: 1px solid black;
            width: 500px;
            height: 600px;
            border-radius: 10px;
        }
        .innerBody{
            margin:auto;
            position:absolute;
            top: 50px;
            height: 500px;
            overflow: auto;
        }
        #inputCss {
            height: 50px;
            width: 350px;
            margin-bottom: 50px;
        }
        .listCss{
            position: relative;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
            border-radius: 4px;
        }
        #buttonCss0 {
            height: 25px;
            width: 50px;
        }
        #buttonCss1 {
            margin:20px 200px;
            height: 50px;
            width: 100px;
        }
        #buttonCss2 {
            margin-top:20px;
            height: 50px;
            width: 100px;
        }
        .addText {
            margin:50px 50px;
            height: 50px;
            width: 300px;
        }
        .buttonDel{
            float:right;
        }
        button:hover{
            background-color: pink;
            color:#fff;
            border-color:pink;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="totalBody">
            <div class="innerBody">
                &nbsp;&nbsp;&nbsp;&nbsp;查询：<input type="text" placeholder="请输入要做的事情" id="inputCss" v-model="wtoDo">
                <ul>
                    <li v-for="(p,index) in toDo2" :key="p.id" class="listCss">
                        <input type="checkbox"  v-model="p.hobby" :value="p.thing" >{{p.id}}-{{p.thing}}
                        <button class="buttonDel" @click="deleteIp(p.id)">删除</button>
                    </li>
                </ul>
                    <div style="margin-left:200px;">
                        {{toDo.filter(v=>{return v.hobby}).length}}/{{toDo.length}}
                    </div>
                <input type="text" placeholder="请输入您要添加的数据(id-event)" class="addText" v-model="wtAdd">
                <button id="buttonCss0" @click="addE">
                    添加
                </button>
                <button id="buttonCss1" @click="finishCheck">
                    提交
                </button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        const vm=new Vue({
            el:'#root',
            data:{
                toDo:[{id:0,thing:"eat",hobby:false},{id:1,thing:"eat",hobby:false}],
                wtoDo:"",
                wtAdd:"",
            },
            computed:{
                toDo2:{
                    get(){      
                        if(this.wtoDo!=="")
                        {
                            return this.toDo.filter((p)=>{
                                return p.thing.indexOf(this.wtoDo) !==-1
                            })
                        }
                        return this.toDo
                    },
                    set(newVal)
                    {
                        this.toDo=this.toDo.filter((p)=>{
                            return p.thing!==newVal
                        })
                    }
                }
            },
            methods:{
                addE(){
                    if(this.wtAdd!=null)
                    {
                        var wtAdd_split=this.wtAdd.split('-')
                        let tmp={id:wtAdd_split[0],thing:wtAdd_split[1],hobby:false}
                        this.toDo.push(tmp);
                        this.wtAdd="";
                    }
                },
                finishCheck(){
                    for(var i=this.toDo.length-1;i>= 0;i--)
                    {
                        if(this.toDo[i].hobby===true)
                        {
                            console.log("您已完成"+this.toDo[i].thing)
                            this.toDo.splice(i,1)
                        }
                    }
                },
                deleteIp(val){
                    for(var i=0;i<this.toDo.length;i++)
                    {
                        if(this.toDo[i].id===val)
                        {
                            this.toDo.splice(i,1);
                        }
                    }
                }
            }
        })
    </script>
</body>
<<<<<<< HEAD
=======
=======
<<<<<<< HEAD
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="./Js/vue.js"></script>
    <title>Vue实训</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .totalBody {
            display: flex;
            position: relative;
            margin: 50px auto;
            border: 1px solid black;
            width: 500px;
            height: 600px;
            border-radius: 10px;
        }
        .innerBody{
            margin:auto;
            position:absolute;
            top: 50px;
            height: 500px;
            overflow: auto;
        }
        #inputCss {
            height: 50px;
            width: 350px;
            margin-bottom: 50px;
        }
        .listCss{
            position: relative;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
            border-radius: 4px;
        }
        #buttonCss0 {
            height: 25px;
            width: 50px;
        }
        #buttonCss1 {
            margin:20px 200px;
            height: 50px;
            width: 100px;
        }
        #buttonCss2 {
            margin-top:20px;
            height: 50px;
            width: 100px;
        }
        .addText {
            margin:50px 50px;
            height: 50px;
            width: 300px;
        }
        .buttonDel{
            float:right;
        }
        button:hover{
            background-color: pink;
            color:#fff;
            border-color:pink;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="totalBody">
            <div class="innerBody">
                &nbsp;&nbsp;&nbsp;&nbsp;查询：<input type="text" placeholder="请输入要做的事情" id="inputCss" v-model="wtoDo">
                <ul>
                    <li v-for="(p,index) in toDo2" :key="p.id" class="listCss">
                        <input type="checkbox"  v-model="p.hobby" :value="p.thing" >{{p.id}}-{{p.thing}}
                        <button class="buttonDel" @click="deleteIp(p.id)">删除</button>
                    </li>
                </ul>
                    <div style="margin-left:200px;">
                        {{toDo.filter(v=>{return v.hobby}).length}}/{{toDo.length}}
                    </div>
                <input type="text" placeholder="请输入您要添加的数据(id-event)" class="addText" v-model="wtAdd">
                <button id="buttonCss0" @click="addE">
                    添加
                </button>
                <button id="buttonCss1" @click="finishCheck">
                    提交
                </button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        const vm=new Vue({
            el:'#root',
            data:{
                toDo:[{id:0,thing:"eat",hobby:false},{id:1,thing:"eat",hobby:false}],
                wtoDo:"",
                wtAdd:"",
            },
            computed:{
                toDo2:{
                    get(){      
                        if(this.wtoDo!=="")
                        {
                            return this.toDo.filter((p)=>{
                                return p.thing.indexOf(this.wtoDo) !==-1
                            })
                        }
                        return this.toDo
                    },
                    set(newVal)
                    {
                        this.toDo=this.toDo.filter((p)=>{
                            return p.thing!==newVal
                        })
                    }
                }
            },
            methods:{
                addE(){
                    if(this.wtAdd!=null)
                    {
                        var wtAdd_split=this.wtAdd.split('-')
                        let tmp={id:wtAdd_split[0],thing:wtAdd_split[1],hobby:false}
                        this.toDo.push(tmp);
                        this.wtAdd="";
                    }
                },
                finishCheck(){
                    for(var i=this.toDo.length-1;i>= 0;i--)
                    {
                        if(this.toDo[i].hobby===true)
                        {
                            console.log("您已完成"+this.toDo[i].thing)
                            this.toDo.splice(i,1)
                        }
                    }
                },
                deleteIp(val){
                    for(var i=0;i<this.toDo.length;i++)
                    {
                        if(this.toDo[i].id===val)
                        {
                            this.toDo.splice(i,1);
                        }
                    }
                }
            }
        })
    </script>
</body>
=======
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="./Js/vue.js"></script>
    <title>Vue实训</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .totalBody {
            display: flex;
            position: relative;
            margin: 50px auto;
            border: 1px solid black;
            width: 500px;
            height: 600px;
            border-radius: 10px;
        }
        .innerBody{
            margin:auto;
            position:absolute;
            top: 50px;
            height: 500px;
            overflow: auto;
        }
        #inputCss {
            height: 50px;
            width: 350px;
            margin-bottom: 50px;
        }
        .listCss{
            position: relative;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
            border-radius: 4px;
        }
        #buttonCss0 {
            height: 25px;
            width: 50px;
        }
        #buttonCss1 {
            margin:20px 200px;
            height: 50px;
            width: 100px;
        }
        #buttonCss2 {
            margin-top:20px;
            height: 50px;
            width: 100px;
        }
        .addText {
            margin:50px 50px;
            height: 50px;
            width: 300px;
        }
        .buttonDel{
            float:right;
        }
        button:hover{
            background-color: pink;
            color:#fff;
            border-color:pink;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="totalBody">
            <div class="innerBody">
                &nbsp;&nbsp;&nbsp;&nbsp;查询：<input type="text" placeholder="请输入要做的事情" id="inputCss" v-model="wtoDo">
                <ul>
                    <li v-for="(p,index) in toDo2" :key="p.id" class="listCss">
                        <input type="checkbox"  v-model="p.hobby" :value="p.thing" >{{p.id}}-{{p.thing}}
                        <button class="buttonDel" @click="deleteIp(p.id)">删除</button>
                    </li>
                </ul>
                    <div style="margin-left:200px;">
                        {{toDo.filter(v=>{return v.hobby}).length}}/{{toDo.length}}
                    </div>
                <input type="text" placeholder="请输入您要添加的数据(id-event)" class="addText" v-model="wtAdd">
                <button id="buttonCss0" @click="addE">
                    添加
                </button>
                <button id="buttonCss1" @click="finishCheck">
                    提交
                </button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        const vm=new Vue({
            el:'#root',
            data:{
                toDo:[{id:0,thing:"eat",hobby:false},{id:1,thing:"eat",hobby:false}],
                wtoDo:"",
                wtAdd:"",
            },
            computed:{
                toDo2:{
                    get(){      
                        if(this.wtoDo!=="")
                        {
                            return this.toDo.filter((p)=>{
                                return p.thing.indexOf(this.wtoDo) !==-1
                            })
                        }
                        return this.toDo
                    },
                    set(newVal)
                    {
                        this.toDo=this.toDo.filter((p)=>{
                            return p.thing!==newVal
                        })
                    }
                }
            },
            methods:{
                addE(){
                    if(this.wtAdd!=null)
                    {
                        var wtAdd_split=this.wtAdd.split('-')
                        let tmp={id:wtAdd_split[0],thing:wtAdd_split[1],hobby:false}
                        this.toDo.push(tmp);
                        this.wtAdd="";
                    }
                },
                finishCheck(){
                    for(var i=this.toDo.length-1;i>= 0;i--)
                    {
                        if(this.toDo[i].hobby===true)
                        {
                            console.log("您已完成"+this.toDo[i].thing)
                            this.toDo.splice(i,1)
                        }
                    }
                },
                deleteIp(val){
                    for(var i=0;i<this.toDo.length;i++)
                    {
                        if(this.toDo[i].id===val)
                        {
                            this.toDo.splice(i,1);
                        }
                    }
                }
            }
        })
    </script>
</body>
>>>>>>> 861c01f (饶驿婷)
>>>>>>> 4a7ce3a (饶驿婷)
>>>>>>> d376503 (饶驿婷)
>>>>>>> ceff70e (饶驿婷)
>>>>>>> f4551b3 (饶驿婷)
</html>